<!-- 群公告编辑 -->
<template>
  <div id="GroupAnnouncementEditor">
    <!-- 头部 -->
    <Head
      title="群公告编辑"
      BackType1="true"
      :NoticeType7="state"
      :NoticeType3="!state"
      v-on:SuccessClick="success"
    ></Head>
    <!-- 主体 -->
    <div id="Main">
      <span class="PartitionText">发布后将通知所有群成员</span>
      <textarea v-model="content" type="textarea" placeholder></textarea>
    </div>
  </div>
</template>

<script>
import Head from "../components/Head.vue";
import { Dialog } from "vant";
export default {
  data() {
    return {
      content: "",
      state: true
    };
  },
  components: {
    Head,
    [Dialog.name]: Dialog
  },
  methods: {
    success() {
      Dialog.confirm({
        message: "该公告会通知全部群成员，是否发布？",
        confirmButtonText: "发布",
      })
        .then(() => {
          this.$router.push({
            path:"/groupannouncement"
          })
        })
        .catch(() => {
          // on cancel
        });
    }
  },
  watch: {
    content: function() {
      this.content == "" ? (this.state = true) : (this.state = false);
    }
  }
};
</script>

<style lang="less" scoped>
#GroupAnnouncementEditor {
  font-size: 28px;
  #Main {
    position: fixed;
    top: 88px;
    overflow: scroll;
    width: 100%;
    // display: flex;
    // justify-content: center;
    // align-items: center;
    // flex-direction: column;
    .PartitionText {
      display: block;
      padding-left: 30px;
      margin-top: 18px;
      margin-bottom: 18px;
      font-size: 24px;
      color: #888888;
    }
    textarea {
      width: 702px;
      height: 240px;
      padding: 30px 24px;
      resize: none;
    }
  }
}
</style>
